<template>
  <div>
    <div class="header-title">
      <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
      <span>我的收藏</span>
      <span></span>
    </div>
    <div class="choose-type">
      <span @click="chooseType = 1,pageNum=1" :class="[chooseType == 1?'chooseNow':'']">房源</span>
      <span @click="chooseType = 2,pageNum=1" :class="[chooseType == 2?'chooseNow':'']">STO</span>
    </div>
    <!-- 房源 -->
    <div class="house scroll-range" style="height:80vh" v-if="chooseType == 1?true:false">
      <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :autoFill="false"
        ref="loadmore"
      >
        <div class="source-list">
          <div class="source-list-detail" v-for="(item,index) in list" :key="index">
            <div class="source-list-detail-left">
              <img :src="item.projectImg" alt />
            </div>
            <div class="source-list-detail-right">
              <p>{{item.ptName}}</p>
              <p>
                ￥{{item.priceRange}}万
                <span>
                  <img src="../../assets/img/yishoucang.png" alt />
                </span>
              </p>

              <div>
                <span>{{item.house_type}}</span>
                <span>|</span>
                <span>{{item.planningAcreage}}m²</span>
              </div>
              <div>
                <!-- <div>
                  <img src="../../assets/img/gongyu.png" alt />
                  <span>{{item.propertyTypeName}}</span>
                </div>
                <div>
                  <img src="../assets/img/gongyu.png" alt />
                  <span>公寓</span>
                </div>-->
                <!-- <div>
                  <img src="../../assets/img/lianpai.png" alt />
                  <span>{{item.propertyTypeName}}</span>
                </div>-->
                <div>
                  <img src="../../assets/img/gongyu.png" alt />
                  <span>{{item.ptName}}</span>
                </div>
              </div>
            </div>
            
          </div>
          <p v-show="noMsg" class="noMsg">没有更多数据了！</p>
        </div>
      </mt-loadmore>
    </div>
    <!-- STO -->
    <div class="area scroll-range" style="height:80vh" v-if="chooseType == 2?true:false">
      <mt-loadmore
        :bottom-method="loadredBottom"
        :bottom-all-loaded="allLoaded"
        :autoFill="false"
        ref="loadmore"
      >
        <div class="source-list">
          <div class="source-list-detail" v-for="(item,index) in room" :key="index">
            <div class="source-list-detail-left">
              <img :src="item.projectImg" alt />
            </div>
            <div class="source-list-detail-right">
              <p>{{item.pName}}</p>
              <p>当前进度：{{parseFloat(item.sellProportion).toFixed(0)}}%
                 <span>
                  <img src="../../assets/img/yishoucang.png" alt />
                </span>
              </p>
              <mt-progress v-model="item.sellProportion" :bar-height="5"></mt-progress>
              <div>
                <span>{{item.virtualWalletName}}</span>
                <span>|</span>
                <span>{{item.totalAmount}}{{item.virtualWalletName}}</span>
              </div>
              <div>
                
                  <span style="font-size:12px;color:#999999">距开始：01天19:56:16</span>
               
              </div>
            </div>
          </div>
          <p v-show="noMsg" class="noMsg">没有更多数据了！</p>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import { Progress } from "mint-ui";
export default {
  data() {
    return {
      chooseType: "1",
      allLoaded: false, //数据是否加载完毕
      pageNum: 1,
      noMsg: false,
      list: [],
      room:[],
      token: JSON.parse(this.$store.state.userMsg).token
    };
  }, 
  components: {},

  created() {
    this.global();
    this.roomeId()
  },
  methods: {
    // 全球房源
    global() {
      let that = this;
      that.$axios
        .get(that.address.collectionList, {
          params: {
            page: that.pageNum,
            rows: 2,
            token: that.token,
            type: 0
          }
        })
        .then(res => {
          console.log(res.data, 9999);
          if (res.data.code == 200) {
            that.list = res.data.data;
            if (res.data.data.length <= 0) {
              that.noMsg = true;
              that.allLoaded = true;
            } else {
              that.noMsg = false;
              that.allLoaded = false;
            }
          }
        });
    },
    //上拉加载
    loadBottom() {
      this.pageNum++;
      this.$axios
        .get(this.address.collectionList, {
          params: {
            page: this.pageNum,
            rows: 2,
            token: this.token,
            type: 0
          }
        })
        .then(res => {
          console.log(res.data, 9999);
          if (res.data.code == 200) {
            this.$refs.loadmore.onBottomLoaded();
            for (var i = 0; i < res.data.data.length; i++) {
              this.list.push(res.data.data[i]);
            }
            if (res.data.data.length <= 0) {
              this.noMsg = true;
              this.allLoaded = true;
            } else {
              this.noMsg = false;
              this.allLoaded = false;
            }
          }
        });
    },
    // STO房产
    roomeId() {
      let that = this;
      that.$axios
        .get(that.address.collectionList, {
          params: {
            page: that.pageNum,
            rows: 2,
            token: that.token,
            type: 1
          }
        })
        .then(res => {
          console.log(res.data, 9999);
          if (res.data.code == 200) {
            that.room = res.data.data;
            if (res.data.data.length <= 0) {
              that.noMsg = true;
              that.allLoaded = true;
            } else {
              that.noMsg = false;
              that.allLoaded = false;
            }
          }
        });
    },
    //上拉加载
    loadredBottom() {
      this.pageNum++;
      this.$axios
        .get(this.address.collectionList, {
          params: {
            page: this.pageNum,
            rows: 2,
            token: this.token,
            type: 1
          }
        })
        .then(res => {
          console.log(res.data, 9999);
          if (res.data.code == 200) {
            this.$refs.loadmore.onBottomLoaded();
            for (var i = 0; i < res.data.data.length; i++) {
              this.room.push(res.data.data[i]);
            }
            if (res.data.data.length <= 0) {
              this.noMsg = true;
              this.allLoaded = true;
            } else {
              this.noMsg = false;
              this.allLoaded = false;
            }
          }
        });
    },
    //下拉刷新
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.mt-progress {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
     height: 0rem;
     line-height: 0rem;
}
.chooseNow {
  color: @blueColor5;
  border-bottom: 2px solid @blueColor10 !important;
}
.header-title {
  border-bottom: 1px solid @blackColor3;
}
.choose-type {
  .flexStartCenter();
  font-size: 14px;
  font-weight: bold;
  color: @blackColor8;
  padding: 0 15px;
  span {
    display: inline-block;
    width: 50%;
    text-align: center;
    padding: 10px 0;
    border-bottom: 2px solid @blackColor3;
  }
}
.source-list {
  padding: 10px 15px 15px;
  .source-list-detail {
    .flexBetween();
    width: 100%;
    height: 128px;
    padding: 10px;
    box-shadow: 0 0 8px 2px #eee;
    margin-bottom: 20px;
    .source-list-detail-left {
      width: 40%;
      .flexCenterContent();
      margin-right: 10px;
      position: relative;
      div:nth-child(2) {
        position: absolute;
        left: 10%;
        top: 70%;
        width: 80%;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        color: #fff;
        padding: 4px 2px;
        .flexCenterCenter();
        border-radius: 4px;
        > img {
          width: 10px;
          margin-right: 4px;
        }
      }
    }
    .source-list-detail-right {
      width: 60%;
      padding-top: 10px;

      p:nth-child(1) {
        font-size: 14px;
        color: @blackColor8;
        font-weight: bold;
      }
      p:nth-child(2) {
        font-size: 16px;
        color: @blueColor10;
        font-weight: bold;
        span img {
          width: 21px;
          height: 20px;
          position: absolute;
          right: 30px;
        }
      }
      > div:nth-child(3) {
        color: @blackColor5;
        font-size: 12px;
        padding: 8px 0;
        border-bottom: 1px solid @blackColor3;
      }
      div:nth-child(4) {
        font-size: 12px;
        color: @blackColor7;
        .flexStartCenter();
        margin-top: 8px;
        div {
          margin-right: 15px;
        }
        img {
          width: 10px;
        }
      }
    }
  }
}

</style>
